<template>
	<view class="content">
		<view class="avatar-box" >
			<image :src="formdata.avatar" mode="" @click="setAvatar"></image>
		</view>

		<uni-forms ref="form" :modelValue="formdata">
			<uni-forms-item label="昵称" name="" label-width="50" required>
				<uni-easyinput v-model="formdata.username" placeholder="" />
			</uni-forms-item>
			<uni-forms-item label="电话" name="" label-width="50" required>
				<uni-easyinput v-model="formdata.phone" placeholder="" type="number" />
			</uni-forms-item>
			<uni-forms-item label="账号" name="" label-width="50" required>
				<uni-easyinput v-model="formdata.account" placeholder="" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="" label-width="50" required>
				<uni-easyinput v-model="formdata.password" placeholder="" type="password" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button type="primary" @click="userRegistered">注册</button>
			<button type="default" @click="cancelRegistered">取消</button>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import myRequest from '../../utils/myRequest.js'
	export default {
		setup() {
			let data = reactive({
				formdata: {
					username: '',
					phone: '',
					account: '',
					password: '',
					avatar: '../../static/logo.png'
				},
				userRegistered() {
					let registeredData = {
						username:data.formdata.username,
						phone:data.formdata.phone,
						account:data.formdata.account,
						password:data.formdata.password
					}
					myRequest({
						url:'/user/registered',
						method:'post',
						data:registeredData
					}).then(res=>{
						console.log(res)
						uni.showToast({
							duration:1500,
							title:res.data.msg,
						})
					})
					setTimeout(()=>{
						uni.hideToast();
						uni.navigateBack({
							delta:1
						})
					},1700)
				},
				cancelRegistered() {
					uni.navigateBack({
						delta:1
					})
				},
				setAvatar() {
					uni.chooseImage({
						count:1,
						sizeType:["original"],
						success(res) {
							console.log(res)
							data.formdata.avatar=res.tempFilePaths[0]
						}
					})
				}
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		padding: 50rpx 30rpx;
	}

	uni-forms {}

	.button-group {
		display: flex;
		justify-content: space-around;

		button {
			font-size: 30rpx;
		}
	}

	.avatar-box {
		padding: 44rpx;
		display: flex;
		justify-content: center;
		
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
